<template>
    <view style="height: 100%">
        <slot></slot>
    </view>
</template>

<script>
export default {
    unicomGroup: ['segment'],
    data() {
        return {};
    },
    options: {
        multipleSlots: true
    },
    relations: {
        '../segment/index': {
            type: 'parent',
            linked() {},
            unlinked() {}
        }
    },
    props: {
        tab: String,
        key: String,
        icon: String,
        iconSize: {
            type: String,
            default: '20'
        },
        image: Object,
        picPlacement: {
            type: String,
            default: 'top'
        },
        dotBadge: Boolean,
        badgeCount: {
            type: Number
        },
        badgeMaxCount: {
            type: Number,
            default: 99
        },
        badgeCountType: {
            type: String,
            default: 'overflow'
        }
    },
    watch: {
        // fix "**" --> "$data"
        $data: {
            deep: true,
            immediate: true,

            handler: function (e) {
                this.updateData(e);
            }
        }
    },
    methods: {
        updateData(e) {
            let t = this.getRelationNodes('segment')[0];
            if (!t) {
                return;
            }
            const a = t.data.tabList;
            if (!(a && a.length > 0)) {
                return;
            }
            const n = a.findIndex((e) => e.key === this.key);
            a[n] = e;
            t.setData(
                {
                    tabList: a
                },
                () => {
                    if (t.data.scrollable) {
                        t.queryMultipleNodes();
                    }
                }
            );
        }
    },
    created: function () {}
};
</script>
<style></style>
